# Campo numérico / Number input

### Código 

```
<number_input></number_input>
```

### Tokens

**Color**

| Class                              | Property         | Color token |
| :--------------------------------- | :--------------- | :---------- |
| `.bx--label`                       | text color       | `$text-02`  |
| `.bx--number input[type='number']` | text color       | `$text-01`  |
| `.bx--number`                      | background-color | `$field-01` |
| `.bx--number--light`               | background-color | `$field-02` |
| `.bx--number`                      | border-bottom    | `$ui-04`    |
| `.bx--number__controls`            | svg color        | `$icon-01`  |

| Class                                       | Property         | Color token    |
| :------------------------------------------ | :--------------- | :------------- |
| `.bx--number:focus`                         | border           | `$focus`       |
| `.bx--number__controls:focus`               | border           | `$focus`       |
| `[data-invalid]`                            | border           | `$support-01`  |
| `[data-invalid]:focus`                      | color            | `$support-01`  |
| `.bx--form-requirement`                     | text color       | `$support-01`  |
| `.bx--label:disabled`                       | text color       | `$disabled-02` |
| `.bx--number:disabled`                      | background-color | `$disabled-01` |
| `.bx--number input[type='number']:disabled` | text color       | `$disabled-03` |

**Tipografía**

| Class                              | Type token       |
| :--------------------------------- | :--------------- |
| `.bx--label`                       | `$label-01`      |
| `.bx--number input[type='number']` | `$body-short-01` |
| `.bx--form-requirement`            | `$label-01`      |

**Estructura**

| Class                              | Property                    | Spacing token |
| :--------------------------------- | :-------------------------- | :------------ |
| `.bx--label`                       | margin-bottom               | `$spacing-03` |
| `.bx--number input`                | height                      | –             |
| `.bx--number input[type='number']` | padding-left                | `$spacing-05` |
| `.bx--number__controls`            | padding-left, padding-right | `$spacing-05` |
| `.bx--number`                      | border-bottom               | –             |

###